<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片分辨率调整工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
            font-size: 2.5em;
            background: linear-gradient(45deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .upload-area {
            border: 3px dashed #667eea;
            border-radius: 15px;
            padding: 40px;
            text-align: center;
            background: rgba(102, 126, 234, 0.05);
            transition: all 0.3s ease;
            margin-bottom: 30px;
            cursor: pointer;
        }

        .upload-area:hover {
            border-color: #764ba2;
            background: rgba(118, 75, 162, 0.1);
            transform: translateY(-2px);
        }

        .upload-area.dragover {
            border-color: #764ba2;
            background: rgba(118, 75, 162, 0.15);
            transform: scale(1.02);
        }

        .upload-icon {
            font-size: 3em;
            color: #667eea;
            margin-bottom: 15px;
        }

        .upload-text {
            font-size: 1.2em;
            color: #666;
            margin-bottom: 10px;
        }

        .upload-hint {
            color: #999;
            font-size: 0.9em;
        }

        #fileInput {
            display: none;
        }

        .controls {
            display: none;
            background: white;
            padding: 25px;
            border-radius: 15px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }

        .control-group {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            gap: 15px;
        }

        .control-group:last-child {
            margin-bottom: 0;
        }

        label {
            font-weight: 600;
            color: #333;
            min-width: 120px;
        }

        input[type="number"] {
            padding: 10px 15px;
            border: 2px solid #e1e5e9;
            border-radius: 8px;
            font-size: 16px;
            width: 120px;
            transition: border-color 0.3s ease;
        }

        input[type="number"]:focus {
            outline: none;
            border-color: #667eea;
        }

        select {
            padding: 10px 15px;
            border: 2px solid #e1e5e9;
            border-radius: 8px;
            font-size: 16px;
            background: white;
            cursor: pointer;
            transition: border-color 0.3s ease;
        }

        select:focus {
            outline: none;
            border-color: #667eea;
        }

        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }

        .btn {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-right: 10px;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
        }

        .btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .preview-area {
            display: none;
            margin-top: 30px;
        }

        .preview-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 20px;
        }

        .preview-box {
            background: white;
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }

        .preview-title {
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
            font-size: 1.1em;
        }

        .preview-image {
            max-width: 100%;
            max-height: 300px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .image-info {
            margin-top: 15px;
            color: #666;
            font-size: 0.9em;
        }

        .progress {
            display: none;
            margin: 20px 0;
        }

        .progress-bar {
            width: 100%;
            height: 8px;
            background: #e1e5e9;
            border-radius: 4px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(45deg, #667eea, #764ba2);
            width: 0%;
            transition: width 0.3s ease;
        }

        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }

            h1 {
                font-size: 2em;
            }

            .preview-container {
                grid-template-columns: 1fr;
            }

            .control-group {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }

            label {
                min-width: auto;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🖼️ 图片分辨率调整工具</h1>
        
        <div class="upload-area" onclick="document.getElementById('fileInput').click()">
            <div class="upload-icon">📁</div>
            <div class="upload-text">点击选择图片或拖拽到此处</div>
            <div class="upload-hint">支持 JPG、PNG、WEBP 格式</div>
            <input type="file" id="fileInput" accept="image/*">
        </div>

        <div class="controls" id="controls">
            <div class="control-group">
                <label>目标宽度:</label>
                <input type="number" id="targetWidth" placeholder="宽度(px)" min="1" max="10000">
                <label>目标高度:</label>
                <input type="number" id="targetHeight" placeholder="高度(px)" min="1" max="10000">
            </div>
            
            <div class="control-group">
                <label>保持比例:</label>
                <div class="checkbox-group">
                    <input type="checkbox" id="keepAspectRatio" checked>
                    <span>锁定宽高比</span>
                </div>
            </div>
            
            <div class="control-group">
                <label>输出质量:</label>
                <select id="quality">
                    <option value="0.9">高质量 (90%)</option>
                    <option value="0.8" selected>标准质量 (80%)</option>
                    <option value="0.7">压缩质量 (70%)</option>
                    <option value="0.6">低质量 (60%)</option>
                </select>
            </div>
            
            <div class="control-group">
                <label>输出格式:</label>
                <select id="outputFormat">
                    <option value="image/jpeg">JPEG</option>
                    <option value="image/png">PNG</option>
                    <option value="image/webp">WebP</option>
                </select>
            </div>
            
            <div class="control-group">
                <button class="btn" onclick="resizeImage()">调整分辨率</button>
                <button class="btn" onclick="resetTool()">重新选择</button>
            </div>
        </div>

        <div class="progress" id="progress">
            <div class="progress-bar">
                <div class="progress-fill" id="progressFill"></div>
            </div>
        </div>

        <div class="preview-area" id="previewArea">
            <div class="preview-container">
                <div class="preview-box">
                    <div class="preview-title">原始图片</div>
                    <img id="originalImage" class="preview-image">
                    <div class="image-info" id="originalInfo"></div>
                </div>
                
                <div class="preview-box">
                    <div class="preview-title">调整后图片</div>
                    <img id="resizedImage" class="preview-image">
                    <div class="image-info" id="resizedInfo"></div>
                    <button class="btn" id="downloadBtn" style="margin-top: 15px; display: none;" onclick="downloadImage()">
                        💾 下载图片
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        let originalFile = null;
        let originalImageData = null;

        // 文件输入处理
        const fileInput = document.getElementById('fileInput');
        const uploadArea = document.querySelector('.upload-area');
        const controls = document.getElementById('controls');
        const previewArea = document.getElementById('previewArea');

        // 拖拽处理
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });

        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('dragover');
        });

        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                handleFile(files[0]);
            }
        });

        fileInput.addEventListener('change', (e) => {
            if (e.target.files.length > 0) {
                handleFile(e.target.files[0]);
            }
        });

        // 处理上传的文件
        function handleFile(file) {
            if (!file.type.startsWith('image/')) {
                alert('请选择有效的图片文件！');
                return;
            }

            originalFile = file;
            const reader = new FileReader();
            
            reader.onload = (e) => {
                const img = new Image();
                img.onload = () => {
                    originalImageData = {
                        width: img.width,
                        height: img.height,
                        src: e.target.result
                    };
                    
                    displayOriginalImage();
                    setupControls();
                    showControls();
                };
                img.src = e.target.result;
            };
            
            reader.readAsDataURL(file);
        }

        // 显示原始图片
        function displayOriginalImage() {
            const originalImage = document.getElementById('originalImage');
            const originalInfo = document.getElementById('originalInfo');
            
            originalImage.src = originalImageData.src;
            originalInfo.innerHTML = `
                分辨率: ${originalImageData.width} × ${originalImageData.height}px<br>
                文件大小: ${(originalFile.size / 1024).toFixed(1)} KB
            `;
            
            previewArea.style.display = 'block';
        }

        // 设置控制面板
        function setupControls() {
            const targetWidth = document.getElementById('targetWidth');
            const targetHeight = document.getElementById('targetHeight');
            const keepAspectRatio = document.getElementById('keepAspectRatio');
            
            targetWidth.value = originalImageData.width;
            targetHeight.value = originalImageData.height;
            
            // 宽高比锁定逻辑
            targetWidth.addEventListener('input', () => {
                if (keepAspectRatio.checked) {
                    const ratio = originalImageData.height / originalImageData.width;
                    targetHeight.value = Math.round(targetWidth.value * ratio);
                }
            });
            
            targetHeight.addEventListener('input', () => {
                if (keepAspectRatio.checked) {
                    const ratio = originalImageData.width / originalImageData.height;
                    targetWidth.value = Math.round(targetHeight.value * ratio);
                }
            });
        }

        // 显示控制面板
        function showControls() {
            controls.style.display = 'block';
        }

        // 调整图片分辨率
        function resizeImage() {
            const targetWidth = parseInt(document.getElementById('targetWidth').value);
            const targetHeight = parseInt(document.getElementById('targetHeight').value);
            const quality = parseFloat(document.getElementById('quality').value);
            const outputFormat = document.getElementById('outputFormat').value;
            
            if (!targetWidth || !targetHeight || targetWidth <= 0 || targetHeight <= 0) {
                alert('请输入有效的宽度和高度！');
                return;
            }
            
            showProgress();
            
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            const img = new Image();
            
            img.onload = () => {
                canvas.width = targetWidth;
                canvas.height = targetHeight;
                
                // 使用高质量缩放
                ctx.imageSmoothingEnabled = true;
                ctx.imageSmoothingQuality = 'high';
                
                ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
                
                // 转换为指定格式
                canvas.toBlob((blob) => {
                    const resizedImage = document.getElementById('resizedImage');
                    const resizedInfo = document.getElementById('resizedInfo');
                    const downloadBtn = document.getElementById('downloadBtn');
                    
                    const url = URL.createObjectURL(blob);
                    resizedImage.src = url;
                    
                    resizedInfo.innerHTML = `
                        分辨率: ${targetWidth} × ${targetHeight}px<br>
                        文件大小: ${(blob.size / 1024).toFixed(1)} KB<br>
                        压缩比: ${((1 - blob.size / originalFile.size) * 100).toFixed(1)}%
                    `;
                    
                    // 保存blob用于下载
                    resizedImage.downloadBlob = blob;
                    resizedImage.downloadFormat = outputFormat;
                    
                    downloadBtn.style.display = 'inline-block';
                    hideProgress();
                }, outputFormat, quality);
            };
            
            img.src = originalImageData.src;
        }

        // 下载图片
        function downloadImage() {
            const resizedImage = document.getElementById('resizedImage');
            const outputFormat = document.getElementById('outputFormat').value;
            
            if (!resizedImage.downloadBlob) {
                alert('请先调整图片分辨率！');
                return;
            }
            
            const url = URL.createObjectURL(resizedImage.downloadBlob);
            const a = document.createElement('a');
            const extension = outputFormat.split('/')[1];
            
            a.href = url;
            a.download = `resized_image.${extension}`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }

        // 重置工具
        function resetTool() {
            originalFile = null;
            originalImageData = null;
            
            controls.style.display = 'none';
            previewArea.style.display = 'none';
            
            document.getElementById('fileInput').value = '';
            document.getElementById('downloadBtn').style.display = 'none';
        }

        // 显示进度条
        function showProgress() {
            const progress = document.getElementById('progress');
            const progressFill = document.getElementById('progressFill');
            
            progress.style.display = 'block';
            progressFill.style.width = '0%';
            
            // 模拟进度
            let width = 0;
            const interval = setInterval(() => {
                width += Math.random() * 20;
                if (width >= 90) {
                    width = 90;
                    clearInterval(interval);
                }
                progressFill.style.width = width + '%';
            }, 100);
        }

        // 隐藏进度条
        function hideProgress() {
            const progress = document.getElementById('progress');
            const progressFill = document.getElementById('progressFill');
            
            progressFill.style.width = '100%';
            setTimeout(() => {
                progress.style.display = 'none';
                progressFill.style.width = '0%';
            }, 300);
        }
    </script>
</body>
</html>